 <template> 
    <div>
        <el-container class="home-con">
            <!-- 主框架的头部 -->
            <el-header class="home-head">
                <span>*****系统管理平台</span>
                <div>
                    <el-badge style="display: flex; align-items: center; margin-right:7px;">

                    </el-badge> 
                    <el-dropdown style="display: flex; align-items: center;"> 
                        <span class="home-user" style="align-items: center;">用户姓名 
                            <i><img 
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-left:5px ; border-radius: 1px;" /></i>
                        </span> 
    
                        <el-dropdown-menu slot="dropdown"> 
                            <el-dropdown-item>个人中心</el-dropdown-item> 
                            <el-dropdown-item>设置</el-dropdown-item> 
                            <el-dropdown-item>注销</el-dropdown-item> 
                        </el-dropdown-menu> 
                    </el-dropdown> 
                </div> 
            </el-header> 
            <el-container> 
                <!-- 导航 --> 
                <el-aside style="width: 180px; background-color: #ececec;"> 
                   <div style="display: flex; justify-content: flex-start; width: 180px;text-align: left;">
                        <el-menu style="background-color: #ececec; width: 180px;"> 
                            <el-menu-item index="-" @click="$event => goto('/home')"> 
                                <i class="el-icon-s-home"></i> 
                                <span>主页</span> 
                            </el-menu-item> 
                            <el-submenu index="2-1"> 
                                <template slot="title"><i class="el-icon-user"></i>人员管理</template> 
                                <el-menu-item index="2-1-1" @click="$event => goto('/empList')">
                                    <i class=""></i>
                                    <span>正式员工</span> 
                                </el-menu-item >
                                <el-menu-item index="2-1-2" @click="$event => goto('/shi')" >
                                    <i></i> 
                                    <span>实习生</span> 
                                </el-menu-item> 
                            </el-submenu>              
                            <el-menu-item index="3-1" @click="$event => goto('/sys')"> 
                                <i class="el-icon-setting"></i> 
                                <span>系统管理</span> 
                            </el-menu-item> 
                        </el-menu> 
                    </div> 
                </el-aside>
                <!-- 工作区域 -->
                <el-main> 
                    <el-breadcrumb separator-class="el-icon-arrow-right"> 
                        <el-breadcrumb-item>首页</el-breadcrumb-item> 
                        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item> 
                    </el-breadcrumb> 

                    <keep-alive> 
                        <router-view v-if="this.$route.meta.keepAlive"></router-view> 
                    </keep-alive> 
                    <router-view v-if!="this.$route.meta.keepAlive"></router-view> 
                </el-main> 
            </el-container> 
        </el-container> 
    </div> 
</template>

 <script> 
 export default { 
    name: 'home',
    data() { 
        return { 
             router: []
        } 
    },
    computed: {
        routes() { 
           return ''
        } 
    },
    methods:{ 
        goto(url) { 
            console.log(url); 
            this.$router.replace(url) 
        }
    }
 }
 </script>
 <style scoped> 

 .home-con { 
 height:100px; 
 position: absolute; 
 top: 0px; 
 left:0px; 
 width:100%; 
 } 


 .home-head { 
 background-color: #20a0ff; 
 color:□#333; 
 text-align: center; 
 display:flex; 
 align-items: center; 
 justify-content: space-between;
 box-sizing:content-box; 
 padding:0px; 
 }

 .home-user { 
 width:180px; 
 min-width:175px; 
 }
 </style>